<template>
  <view class="bargain_container" v-if="hasShow">
    <view class="floor_bargain_title">
      <image class="floor_type" :src="staticUrl()+'/new/activity_title2.png'"></image>
      <image :src="staticUrl()+'/new/pintuan_more.png'" class="more" @click="clickJumpInfo"></image>
    </view>
    <!-- 数据 -->
    <swiper autoplay :interval="3000" circular class="swiper">
      <swiper-item v-for="(item, index) in goodsList" :key="index" class="swiper-item">
        <view v-for="(i, ins) in item" :key="ins" @click="clickJumpInfo" class="item">
          <image v-if="i.inform" mode="aspectFit" :src="i.inform" class="img inform_announcement">
          </image>
          <ImageCache class="img" :class="i.quantity ? '' : 'sellOut_container-img'"
            :src="i.original ? i.original : staticUrl() + '/home/defaultImg.png'"
            :mode="'aspectFit'" />
          <view class="goodsName">
            <span class="ephedrine" v-if="i.ephedrine">含特</span>
            <span class="goods_name singleRowEllipsis"> {{ i.goodsName }} </span>
          </view>
          <!-- <text class="goodsName singleRowEllipsis">{{ i.goodsName }}  </text>
            <view v-if="i.promotionMethods.length">
            <span class="ephedrine" v-if="i.ephedrine">含麻</span>
            <text v-for="(n, m) in i.promotionMethods" :key="m"
              :class="n.promotionType === 'COUPON' ? 'voucher' : 'seckillType'">
              {{ n.promotionType === 'COUPON' ? '券' : n.name }}
            </text>
          </view> -->
          <view v-if="hasToken() && i.promotionPrice">
            <view class="promotionPrice">
              <text class="coinSymbol">￥</text>
              <text class="price" v-if="i.promotionPrice">{{ i.promotionPrice }}</text>
              <text class="packing">/{{ i.goodsUnit }}</text>
            </view>
            <view class="originalPrice">
              <text class="price" v-if="i.originalPrice">￥{{ i.originalPrice }}</text>
            </view>
            <text class="prices singleRowEllipsis" v-if="!i.promotionPrice">
              资质审核可见
            </text>
          </view>
          <view class="prices" v-if="!hasToken()">
            <text class="login_see">登录可见</text>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import { activityData } from '@/api/home/index'
export default {
  props: {
    data: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      goodsList: [],
      hasShow: true
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    // 跳转 详情
    clickJumpInfo (val) {
      uni.navigateTo({
        url: `/subpackage/activity/activity?promotionType=${this.data.promotion.promotionType}&title=${this.data.promotion.title}`
      })
    },
    // 获取数据 组装数组
    getList () {
      activityData({
        path: this.data.promotion.promotionGoodsPath,
        params: { pageNumber: 1, pageSize: 9 }
      }).then(res => {
        let goods = res.data.records
        if (!goods.length) {
          this.hasShow = false
          return
        }
        if (res.code === 200 && goods.length > 0) {
          let num = Math.ceil(goods.length / 3)
          for (let i = 0; i < num; i++) {
            this.$set(this.goodsList, i, goods.slice(i * 3, i * 3 + 3))
          }
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.bargain_container {
  background-image: url("https://www.xdyy100.com/wholesale/files/mp/static/new/floor_pintuan.png");
  background-repeat: no-repeat;
  background-size: 100%;
  width: 702rpx;
  height: 380rpx;
  .floor_bargain_title {
    margin: 0 24rpx 0 29rpx;
    padding-top: 27rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .floor_type {
      width: 348rpx;
      height: 44rpx;
    }
    .more {
      width: 104rpx;
      height: 44rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .swiper {
    height: 261rpx;
    margin: 0 29rpx;
    margin-top: 20rpx;
    .swiper-item {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      .item {
        width: 204rpx;
        height: 261rpx;
        background: #ffffff;
        // box-shadow: 0rpx 0rpx 1rpx 1rpx rgba(255, 29, 0, 0.5);
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        display: flex;
        flex-flow: column nowrap;
        margin-right: 16rpx;
        .img {
          width: 136rpx;
          height: 112rpx;
          margin: 28rpx 34rpx 0;
        }
        .goodsName {
          margin: 0 16rpx;
          display: flex;
          align-items: center;
          .goods_name {
            font-size: 24rpx;
          }
        }
        .promotionPrice {
          margin: 0 16rpx;
          color: #ef231b;
          .coinSymbol {
            font-size: 24rpx;
          }
          .price {
            font-size: 32rpx;
            font-weight: bold;
          }
          .packing {
            font-size: 20rpx;
            color: rgba($color: #000000, $alpha: 0.6);
          }
        }
        .originalPrice {
          margin: 0 16rpx;
          font-size: 20rpx;
          color: #999999;
          text-decoration-line: line-through;
        }
        .prices {
          margin-bottom: 18rpx;
          .login_see {
            font-size: 28rpx;
            color: #ef231b;
          }
        }
        .rushToBuy {
          font-size: 18rpx;
          border-radius: 14rpx;
          width: 60rpx;
          height: 34rpx;
          line-height: 34rpx;
          color: #fff;
          text-align: center;
          background: #d72300;
          margin-left: 68%;
        }
      }
    }
  }
}
</style>
